<template>
	<div class="home">
		<selectGrade v-if="isShowSelectPage" class='selectGrade' @closeSelectPage='closeSelectPage'> </selectGrade>
		<div class="index" v-else>
			<p class="top">
				<span class='name'>小明同学</span>
				<span class="right">
					<router-link to='/notice'> <img class="icon sizeA" src='../assets/home/notice.png' alt=""></router-link>
				</span>
			</p>
			<swiper height='130px' :interval='4000' :list="list" v-model="index"></swiper>
			<group>
				<cell :title="'今日伙食'">
					<marquee>
						<marquee-item v-for="i in mesList" :key="i" @click.native="onClick(i)"> {{i}}</marquee-item>
					</marquee>
				</cell>
			</group>
			<swiper height='200px' :auto='true' :interval='2000' :duration='300' :list="list" v-model="index"></swiper>
			</sticky>
			<div>
				<sticky ref="sticky" :check-sticky-support="false">
					<p class="top"><span class='left'>动态</span> <span class="right"> 热门<img class="icon" src='../assets/sort.png' alt="">
							赞数<img class="icon" src='../assets/home/good.png' alt=""></span></p>
				</sticky>
				<div class="article">
					<ul>
						<li v-for="i in 10" @click="toDetail">
							<div class="left">
								<p class="mes">今天小明作业按时完成了</p>
								<p class="bottom">李老师
									<span class="good">
										183赞同 - 167评论
									</span>
								</p>
							</div>
							<div class="right">

								<img src='../assets/login.jpg' alt="">
							</div>
						</li>
					</ul>
				</div>

			</div>
			<navBottom class="nav"></navBottom>
		</div>
	</div>
</template>
<script>
	import {
		Divider,
		XButton,
		Swiper,
		Marquee,
		MarqueeItem,
		Group,
		Cell,
		Sticky
	} from 'vux'
	import SelectGrade from '@/components/selectGrade'
	import NavBottom from '@/components/navBottom'
	export default {
		components: {
			Divider,
			XButton,
			Swiper,
			Marquee,
			MarqueeItem,
			Group,
			Cell,
			Sticky,
			SelectGrade,
			NavBottom
		},
		data() {
			return {
				isShowSelectPage: true,
				list: [{
					url: 'javascript:',
					img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
					title: '送你一朵fua'
				}, {
					url: 'javascript:',
					img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg',
					title: '送你一辆车'
				}, {
					url: 'javascript:',
					img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg', // 404
					title: '送你一次旅行',
				}],
				mesList: ['早餐', '午餐', '晚餐'],
				index: 0,


			}
		},
		created() {

		},
		mounted() {
			var isShow = this.$route.query.show;
			if (isShow) {
				this.isShowSelectPage = false;
			}

		},
		methods: {
			closeSelectPage() {
				this.isShowSelectPage = false;
			},
			toDetail() {
				this.$router.push('/detail');
			},

		},


	}
</script>

<style lang="less" scoped="scoped">
	.home {
		width: 100%;
		height: 100%;

		.selectGrade {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: #FFF;
		}

		.index {
			width: 100%;
			height: 100%;
			text-align: left;
			// overflow-x: hidden;



			.top {
				text-align: center;
				position: relative;
				background: #FFFFFF;
				height: 40px;
				width: 100%;
				line-height: 40px;
				background: #FFFFFFF;
				border-bottom: 1px solid gainsboro;

				.name {
					font-size: 18px;
				}

				.left {
					position: absolute;
					left: 5%;
				}

				.right {
					position: absolute;
					right: 5%;
					font-size: 14px;
					color: grey;

					.icon {
						width: 14px;
						height: 14px;
						vertical-align: middle;
						margin: 0 5px 0 2px;
					}

					.sizeA {
						width: 20px;
						height: 20px;
					}
				}
			}

			.article {
				padding-bottom: 40px;

				ul {
					list-style: none;

					li {
						padding: 10px 10px 10px 10px;
						height: 80px;
						border-bottom: 1px solid gainsboro;
						background: #FFF;

						.left {
							width: 60%;
							height: 100%;
							float: left;
							position: relative;

							.bottom {
								width: 100%;
								position: absolute;
								bottom: -5px;
								font-size: 14px;

								.good {
									position: absolute;
									right: 10px;
									color: #c8c8cd;

									img {
										width: 24px;
										height: 24px;
										vertical-align: middle;
									}
								}
							}
						}

						.right {
							width: 40%;
							height: 100%;
							float: left;

							img {
								width: 100%;
								height: 100%;
								border-radius: 5px;
							}
						}


					}
				}
			}

		}


	}
</style>
